<template>
  <h2>计算属性</h2>
  <p>count: {{ count }}</p>
  <p>doubleCount: {{ doubleCount }}</p>
  <button @click="add">btn</button>
  <p>{{ oddList }}</p>
</template>

<script>
import { ref, computed } from "vue";
export default {
  setup() {
    const count = ref(3);
    const list = ref([1, 2, 3, 4, 5, 6, 7]);
    const add = () => {
      count.value++;
    };

    // computed变成函数调用，需要解构
    // 里面传入回调函数，并且有一个返回值就是计算属性
    const doubleCount = computed(() => {
      return count.value * 2;
    });

    const oddList = computed(() => {
      return list.value.filter((item) => item % 2);
    });

    return {
      count,
      add,
      doubleCount,
      oddList,
    };
  },
};
</script>
